<template>
  <div class="mb-8">
    <div class="flex items-center mb-4">
      <div class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">
        {{ day.day }}
      </div>
      <h2 class="text-xl font-bold flex-1">{{ day.title }}</h2>
      <button
          class="p-1 rounded-full hover:bg-gray-100"
          @click="toggleExpanded"
      >
        <i :class="['fas', expanded ? 'fa-chevron-down' : 'fa-chevron-right', 'text-gray-600']"></i>
      </button>
    </div>
    <div v-if="expanded" class="pl-4">
      <div v-for="(item, idx) in day.schedule" :key="idx">
        <ScheduleItem :item="item" />
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import ScheduleItem from './ScheduleItem.vue';

export default {
  name: 'TripDay',
  components: {
    ScheduleItem
  },
  props: {
    day: {
      type: Object,
      required: true
    },
    index: {
      type: Number,
      default: 0
    }
  },
  setup() {
    const expanded = ref(true);

    const toggleExpanded = () => {
      expanded.value = !expanded.value;
    };

    return {
      expanded,
      toggleExpanded
    };
  }
};
</script>